<template>
	<view class="login-page">
		<!-- 关闭按钮 -->
		<view class="close-btn" @tap="handleClose">
			<image src="/static/images/close.png" mode="aspectFit"></image>
		</view>
		
		<!-- 标题 -->
		<view class="title">登录/注册</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入框 -->
			<view class="input-box">
				<input 
					type="number" 
					v-model="phone" 
					placeholder="输入手机号码" 
					maxlength="11"
					placeholder-class="placeholder-style"
				/>
			</view>
			
			<!-- 验证码输入框 -->
			<view class="input-box code-box">
				<input 
					type="number" 
					v-model="code" 
					placeholder="验证码" 
					maxlength="6"
					placeholder-class="placeholder-style"
				/>
				<text 
					class="get-code" 
					:class="{ 'disabled': counting }"
					@tap="getCode"
				>
					{{ counting ? `${count}s后重试` : '获取验证码' }}
				</text>
			</view>
			
			<!-- 登录按钮 -->
			<button class="login-btn" 
				:class="{ 'loading': loading }" 
				@tap="handleLogin">
				登录
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import http from '@/utils/request.js'

// 响应式状态
const phone = ref('')
const code = ref('')
const counting = ref(false)
const count = ref(60)
const loading = ref(false)
let timer = null

// 验证手机号格式
const validatePhone = (phone) => {
	return /^1[3-9]\d{9}$/.test(phone)
}

// 关闭页面
const handleClose = () => {
	uni.navigateBack()
}

// 获取验证码
const getCode = async () => {
	if (counting.value) return
	
	if (!validatePhone(phone.value)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		return
	}
	
	try {
		const res = await http.post('/login', {
			username:phone.value,
			password:'123456'
		})
		
		// 发送成功，开始倒计时
		counting.value = true
		count.value = 60
		timer = setInterval(() => {
			if (count.value > 0) {
				count.value--
			} else {
				counting.value = false
				clearInterval(timer)
			}
		}, 1000)
		
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		})
		setTimeout(()=>{
			uni.showToast({
				title:"验证码"+res.verifycode,
				duration:2500
			})
		},2000)
	} catch (e) {
		console.error('发送验证码失败:', e)
	}
}

// 登录
const handleLogin = async () => {
	if (loading.value) return
	
	// 表单验证
	if (!validatePhone(phone.value)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		return
	}
	
	if (!code.value || code.value.length !== 6) {
		uni.showToast({
			title: '请输入6位验证码',
			icon: 'none'
		})
		return
	}
	
	loading.value = true
	localStorage.setItem("username",phone.value)
	http.post('/signIn',{username:phone.value})
	// 延迟跳转到首页
	setTimeout(() => {
	
		uni.reLaunch({
			url: '/pages/main/main'
		})
	}, 1500)
 
		loading.value = false
	
}

// 组件销毁前清理定时器
onBeforeUnmount(() => {
	if (timer) {
		clearInterval(timer)
	}
})
</script>

<style lang="scss">
.login-page {
	min-height: 100vh;
	background-color: #E8F6F6;
	padding: 40rpx;
}

.close-btn {
	margin-bottom: 60rpx;
	
	image {
		width: 40rpx;
		height: 40rpx;
	}
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 80rpx;
}

.form-container {
	.input-box {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		
		input {
			height: 80rpx;
			font-size: 32rpx;
		}
	}
	
	.code-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		input {
			flex: 1;
		}
		
		.get-code {
			color: #5CD3D3;
			font-size: 28rpx;
			padding-left: 30rpx;
			
			&.disabled {
				color: #999;
			}
		}
	}
}

.login-btn {
	width: 100%;
	height: 88rpx;
	background-color: #5CD3D3;
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&::after {
		border: none;
	}
	
	&.loading {
		opacity: 0.7;
		pointer-events: none;
	}
}

.placeholder-style {
	color: #999;
	font-size: 32rpx;
}
</style>
